import { uploadFileUsingPost } from '@/services/backend/fileController';
import { InboxOutlined } from '@ant-design/icons';
import { message, UploadFile, UploadProps } from 'antd';
import Dragger from 'antd/es/upload/Dragger';
import React, { useState } from 'react';

// 外层传入的参数
interface Props {
  biz: string;
  onChange?: (fileList: UploadFile[]) => void;
  value?: UploadFile[];
  description?: string;
  accept?: string;
}

/**
 * 自定义文件上传组件
 * @constructor
 */
const FileUploader: React.FC<Props> = (Props) => {
  const { biz, value, description, onChange, accept } = Props;
  const [loading, setLoading] = useState(false);

  // 创建上传方法
  const uploadProps: UploadProps = {
    // 上传对象（file对象）
    name: 'file',
    // 以text格式展示上传数据
    listType: 'text',
    // 是否开启多文件选择(选择文件时，是否可以选择多个文件）
    multiple: false,
    // 一次上传文件数
    maxCount: 1,
    // 文件列表（接收外层传入的value数据）
    fileList: value,
    // 校验文件类型（通过外层传入的accept数据）
    accept: accept,
    // 根据loading的值来锁定该上传组件，true就是锁定，false就是不锁定
    disabled: loading,
    // 上传成功后会触发该事件，并将外层传入的fileList数据
    // 传入给外层定义的onChange方法
    onChange: ({ fileList }) => {
      onChange?.(fileList);
    },
    // 请求操作
    customRequest: async (fileObj: any) => {
      setLoading(true);
      try {
        const res = await uploadFileUsingPost({ biz }, {}, fileObj.file);
        fileObj.onSuccess(res.data);
      } catch (e: any) {
        message.error('上传失败' + e.message);
        fileObj.onError(e);
      }
      setLoading(false);
    },
  };

  return (
    <Dragger {...uploadProps}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">点击或者拖拽上传文件</p>
      <p className="ant-upload-hint">{description}</p>
    </Dragger>
  );
};
export default FileUploader;
